<template>
    <view class="order-submit-item" v-if="formNoEmpty ? item && item.OrderFormTemplateList.length > 0 : item"
        :class="{ no: data.Discount <= 0 }">
        <view class="item-top">
            <image v-if="!getAppSet().isHideImg" class="product-img"
                :src="item.V_ThumbnailUrl160 ? easyGetImgUrl(item.V_ThumbnailUrl160) : '/static/img/no-img.jpg'"
                mode="aspectFill"></image>
            <view class="product-info">
                <text class="product-name">{{ item.V_Title }}</text>
                <button class="btn btn-yellow-hollow" v-if="item.PolicyList.length > 0" @click="open">
                    <image class="icon" src="/static/icon/coupon@2x1.png"></image>
                    <text class="policy-text">{{ userPolicy.Name }}</text>
                    <text class="arrow" :class="isShowSelect ? 'arrow-up' : 'arrow-down'"></text>
                </button>
            </view>
        </view>
        <view class="item-center">
            <view class="pro-item">
                <view class="left">
                    <text class="label" v-if="item.V_AttributeNameValue"><text class="specification">{{
                        item.V_AttributeNameValue ? item.V_AttributeNameValue : "默认规格"
                            }}</text></text>
                    <text class="label">
                        <text class="price-bold">￥{{ parseFloat(Number(item.V_GradePrice).toFixed(item.PriceDigits)) }}
                        </text>
                        <text class="value product-num">x{{ parseFloat(Number(item.Amount).toFixed(item.NumDigits))
                        }}{{ item.UnitName ? item.UnitName : item.RationUnit }}</text>
                    </text>
                </view>
                <view class="right">
                    <text class="value price-text">小计：￥{{ item.TotalMoney.toFixed(2) }}</text>
                </view>
            </view>
        </view>
        <view class="item-bottom" v-if="false">
            <input placeholder="商品备注信息" />
        </view>
        <uni-popup ref="popPolicy" type="bottom" @change="changePop" background-color="#fff" :safe-area="false">
            <view class="pop-main">
                <view class="title">
                    <text class="title-text">修改促销</text>
                    <uni-icons class="icon-close" size="48" type="closeempty" @click="close"></uni-icons>
                </view>
                <view class="main">
                    <view class="policy-item" v-for="(item, index) in item.PolicyList" :key="index"
                        @click="select(item)">
                        <text class="policy-name">{{ item.Name }}</text>
                        <uni-icons class="icon" :type="userPolicy.ID == item.ID ? 'circle-filled' : 'circle'" size="36"
                            :customIcons="userPolicy.ID == item.ID ? 'icon-green' : ''"></uni-icons>
                    </view>
                </view>
            </view>
        </uni-popup>
        <view class="setMeal" v-if="item.ProductType == 1 && item.ProductList.length > 0">
            <view class="title">
                <view>套餐明细</view>
                <view class="more" @click="moreshow = !moreshow"><text>{{ moreshow ? '收起' : '展开' }}</text><uni-icons
                        :type="moreshow ? 'arrowup' : 'arrowdown'" size="20" customIcons="icon-gray-1"></uni-icons></view>
            </view>
            <view class="setMeal-product" v-if="moreshow" v-for="(item, index) in item.ProductList" :key="item.ID">
                <image class="image" :src="easyGetImgUrl(item.ProductImage)" mode="aspectFill"></image>
                <view class="setMeal-product-item">
                    <view>
                        <view class="name text-show-line-2">{{ item.ProductName }}</view>
                        <view class="num">数量：{{ item.Amount }}{{ item.DefaultUnit }}</view>
                    </view>
                    <view class="price"><text>¥{{ item.SalePrice }}</text><text class="del">¥{{ item.Price }}</text></view>
                </view>
            </view>

        </view>
        <view class="remark" @click="goUrl(item)">
            <view>定制内容点击此处填写</view>
            <view>
                <text style="color: #333" v-if="item.Remark || item.CustomForm">已填写</text>
                <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            default: {},
        },
        data: {
            type: Object,
            default: {},
        },
        formNoEmpty: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            userPolicy: {},
            isShowSelect: false,
            moreshow: false
        }
    },
    mounted() {
        this.getPolicy()
    },
    methods: {
        // OrderFormTemplateId
        goUrl(item) {
            let productdata = {
                ProductId: item.ProductId,
                Amount: item.Amount,
                UnitId: item.UnitId,
                UnitName: item.DefaultUnit,
                SkuId: item.SkuId,
                Ratio: item.Ratio,
                CustomForm: item.CustomForm,
                OrderFormTemplateId: item.OrderFormTemplateId,
                Remark: item.Remark,
            }
            this.easyGoTo(
                "/pages_shop/packet/order/remark?productdata=" + encodeURIComponent(JSON.stringify(productdata)),
            )
        },
        getPolicy() {
            this.item.PolicyList.forEach((e) => {
                if (e.ID == this.data.PolicyId) {
                    this.userPolicy = e
                }
            })
        },
        select(item) {
            let obj = {
                CarId: this.item.ID,
                PolicyId: item.ID,
            }
            this.userPolicy = item
            this.close()
            this.$emit("changePolicy", obj)
        },
        close() {
            this.$refs.popPolicy.close()
        },
        open() {
            this.$refs.popPolicy.open()
        },
        changePop(e) {
            this.isShowSelect = e.show
        },
    },
}
</script>

<style lang="scss">
.order-submit-item {
    display: flex;
    flex-direction: column;
    border-bottom: 12rpx solid #f1f1f1;
    margin-left: -24rpx;
    margin-right: -24rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;

    .item-top {
        display: flex;
        flex-direction: row;
        margin-top: 24rpx;

        .product-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: $border-radius-10;
            margin-right: 20rpx;
        }

        .product-info {
            display: flex;
            flex-direction: column;
            flex: 1;

            .product-name {
                font-weight: 700;
                font-size: $font-size-28;
                color: $app-color-text-mian;
                flex: 1;
                margin-bottom: 14rpx;
            }

            .policy-text {
                flex: 1;
                padding-right: 12rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                display: flex;
                color: #fa6400;
            }

            .arrow {
                border: solid #333333;
                border-width: 0 1px 1px 0;
                padding: 3px;
            }

            .arrow-down {
                margin-top: -4rpx;
            }

            .btn {
                flex-direction: row;
                font-size: $font-size-20;
                margin-left: 0;
            }
        }

        .btn-yellow-hollow {
            height: 48rpx;
            margin-bottom: 20rpx;
            width: auto;
            border-radius: 4rpx;
            border-color: rgba(0, 0, 0, 0);
            background: #ffffff;
            border: 1rpx solid #fa6400;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }

    .item-center {
        background: #f7f7f7;
        padding: 14rpx 24rpx;
        margin-top: 20rpx;

        .item-cell {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-bottom: 8rpx;

            .label {
                display: flex;
                flex: 1;
                color: $app-color-text-tip;
            }

            .value {
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    .item-bottom {
        border-radius: $border-radius-10;
        padding: $app-page-padding;
        background: $app-color-input-bg;

        input {
            font-size: $font-size-24;
            color: $app-color-text-tip;
        }
    }
}

.policy-item {
    .policy-name {
        display: flex;
        flex: 1;
    }
}

.total-price {
    color: $app-color-main;
}

.product-num {
    color: $color-gray-1;
    font-size: 28rpx;
}

.pro-item {
    display: flex;
    flex-direction: row;

    .left {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 4rpx;

        .label {
            font-size: 26rpx;
            color: $app-color-text-tip;
            padding: 6rpx 0;

            text {
                font-size: 26rpx;
            }

            .specification {
                font-size: 28rpx;
                color: $color-gray-1;
            }
        }

        .price-bold {
            color: #000;
            font-size: 32rpx;
            font-weight: bold;
            padding-right: 14rpx;
        }
    }

    .right {
        display: flex;
        align-items: center;

        .price-text {
            font-size: $font-size-28;
            color: $color-gray-1;
        }
    }
}

.remark {
    .title {
        color: #c4181f;
    }

    display: flex;
    padding: 24rpx 0;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #2f2f2f;

    text {
        color: $color-gray-3;
    }
}

.setMeal {
    padding: $app-page-padding 0 0 0;
    background: $color-white;
    margin-bottom: 20rpx;

    .title {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #F0F0F0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .more {
        width: 116rpx;
        height: 52rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 32rpx;
        border: 1rpx solid #B9C0D0;
        font-weight: normal;
    }

    .setMeal-product {
        padding: 24rpx 0;
        display: flex;

        .image {
            width: 120rpx;
            height: 120rpx;
            margin-right: 20rpx;
            flex-shrink: 0;
        }

        .setMeal-product-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
                font-size: 24rpx;
                font-weight: 500;
                color: #333333;
                font-weight: bold;
            }

            .num {
                font-size: 20rpx;
                color: #666666;
                padding-top: 4rpx;
            }

            .price {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                text {
                    font-size: 36rpx;
                    font-weight: bold;
                    color: #EC612A;
                }

                .del {
                    font-size: 24rpx;
                    color: #999999;
                    font-weight: normal;
                    text-decoration: line-through;
                    padding-left: 6rpx;
                }
            }
        }

    }
}
</style>
